<template>
  <div id="cont">
    <div class="menu">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addMenu('dir')" class="margin-bottom-10">新增目录</el-button>
      <el-table
        :data="menuTree"
        style="width: 100%"
        row-key="id"
        border
        align="center"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="title"
          label="名称"
          align="left">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路由"
          align="center">
        </el-table-column>
        <el-table-column
          prop="component"
          label="组件"
          align="center">
        </el-table-column>
        <el-table-column
          label="类型"
          align="center">
          <template #default="scope">{{ transWord(scope.row.type) }}</template>
        </el-table-column>
        <el-table-column
          label="日期"
          align="center">
          <template #default="scope">{{ forTime(scope.row.date) }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center">
          <template #default="scope">
            <el-button type="text" size="mini" icon="el-icon-plus" @click="addMenu(scope.row)">新增</el-button>
            <el-button type="text" size="mini" icon="el-icon-edit" @click="updateMenu(scope.row)">更新</el-button>
            <el-button type="text" size="mini" icon="el-icon-del" @click="delMenu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        width="55%"
        :visible.sync="isEdit">
        <el-form ref="form" :inline="true" :model="formData" label-width="100px" size="small">
          <el-form-item label="类型：">
            <el-radio-group v-model="formData.type">
              <el-radio :label="0">目录</el-radio>
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单名：">
            <el-input type="text" v-model="formData.title"></el-input>
          </el-form-item>
          <el-form-item label="路由：" v-if="formData.type !== 2">
            <el-input type="text" v-model="formData.path"></el-input>
          </el-form-item>
          <el-form-item label="组件：">
            <el-input type="text" v-model="formData.component"></el-input>
          </el-form-item>
          <el-form-item label="图标：">
            <el-input type="text" v-model="formData.icon"></el-input>
          </el-form-item>
          <el-form-item label="权限字段：">
            <el-input type="text" v-model="formData.permi"></el-input>
          </el-form-item>
          <el-form-item label="排序：">
            <el-input-number v-model="formData.sort" controls-position="right" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="是否显示：">
            <el-select v-model="formData.show">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="mini" @click="close">取 消</el-button>
            <el-button type="primary" size="mini" @click="commit">提 交</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { menuList, menuAdd, menuUpdate, menuDel } from '@/api/menu_api';
import { mapGetters } from 'vuex';
import app from '@/utils/index';
import { generateMenus } from '@/router/navmenu';

export default {
  name: 'menus',
  data() {
    return {
      title: '',
      isEdit: false,
      isUpdate: false,
      menuTree: [],
      formData: {
        type: 0,
        show: 1,
        sort: 0
      }
    }
  },
  computed: {
    ...mapGetters({
      state_menus: 'menus',
      origin_menus: 'originMenus'
    })
  },
  created() {
    const ms = this.state_menus;
    if(ms.length > 0) {
      console.log('136...', ms);
    }else {
      this.getMenus();
    }
  },
  methods: {
    forTime(val) {
      return app.dateTime(val, {format: 'YY-MM-DD'});
    },
    transWord(val) {
      return val === 0 ? '目录' : val === 1 ? '菜单' : '按钮';
    },
    selectRadio(evt, key) {
      console.log('138...', evt, key);
      const tmp = key.split('.'),
            pk = tmp[0],
            sk = tmp[1];
      const val = evt.target.dataset.value;
      this[pk][sk] = val;
    },
    getMenus() {
      this.menuTree = [];
      menuList().then(response => {
        const res = response.data;
        if(res.s) {
          const menuTree = generateMenus(res.d);
          this.loopExe(menuTree, this.menuTree);
        }
      })
    },
    loopExe(me, curArr) {
      me.map(item => {
        const curObj = {
          id: item.meta.id,
          title: item.meta.title,
          path: item.path,
          component: item.name,
          type: item.meta.type,
          icon: item.meta.icon,
          permi: item.meta.permi,
          sort: item.meta.sort,
          show: item.meta.show,
          date: item.meta.date
        };
        curArr.push(curObj);
        if(item.children && item.children.length > 0) {
          curObj['children'] = [];
          this.loopExe(item.children, curObj.children);
        }
      })
    },
    // 新增菜单
    addMenu(ids) {
      console.log(177);
      this.title = '新增';
      this.isEdit = true;
      if(ids === 'dir') {
        this.formData.pid = '';
      }else {
        this.formData.pid = ids.id;
      }

      this.formData['mid']&&delete this.formData['mid'];
    },
    // 修改菜单
    updateMenu(ids) {
      console.log('159...', ids);
      this.title = '修改';
      this.isEdit = true;
      this.isUpdate = true;

      const com = ids.path.split('/');
      this.formData = {
        mid: ids.id,
        type: ids.type,
        title: ids.title,
        path: ids.path,
        component: com.splice(com.length-1, 1)&&com.join('/') +'/'+ ids.component,
        icon: ids.icon,
        permi: ids.permi,
        sort: ids.sort,
        show: ids.show
      };
      // this.formData['mid'] = ids.id;
      // this.formData['type'] = ids.type;
      // this.formData['title'] = ids.title;
      // this.formData['path'] = ids.route;
      // this.formData['component'] = ids.route + (ids.type === 0 ? '/Index' : '/'+ ids.component);
      // this.formData['icon'] = ids.icon;
      // this.formData['permi'] = ids.permi;
      // this.formData['sort'] = ids.sort;
      // this.formData['show'] = ids.show;

      // this.formData['pid']&&delete this.formData['pid'];

      // console.log('174...', this.formData);
    },
    // 删除菜单
    delMenu(ids) {
      const mid = ids.id;
      if(ids.children&&ids.children.length > 0) {
        return app.flash('error', `${ids.type === 0 ? '目录下含有子菜单，无法删除' : '~'}`)
      }
      menuDel({mid}).then(response => {
        console.log('181...', response);
      })

    },
    // 提交
    commit() {
      const postData = this.formData;
      if(this.isUpdate) {
        menuUpdate(postData).then(response => {
          const res = response.data;
          if(res.s) {
            this.$message.success('修改成功！');
            // this.getMenus();
            this.close();
          }else {
            this.$message.error('修改失败！');
          }
        })
      }else {
        menuAdd(postData).then(response => {
          console.log('219...', response);
          const res = response.data;
          if(res.s) {
            this.$message.success('新增成功！');
            this.getMenus();
            this.close();
          }else {
            this.$message.error('新增失败！');
          }
        })
      }
    },
    // 取消
    close() {
      this.isEdit = false;
      this.isUpdate = false;
      delete this.formData['mid'];
      delete this.formData['pid'];

      this.formData['type'] = '';
      this.formData['title'] = '';
      this.formData['path'] = '';
      this.formData['component'] = '';
      this.formData['icon'] = '';
      this.formData['permi'] = '';
      this.formData['sort'] = 0;
      this.formData['show'] = 1;

      console.log('202...', this.formData);
    }
  }
}
</script>

<style lang="less" scoped>
  .ava {
    position: relative;
    width: 120px;
    height: 120px;
    border: 3px solid #fff;
    outline: 1px solid #ddd;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      vertical-align: middle;
    }
    .update {
      position: absolute;
      right: 0;
      bottom: 0;
      // display: none;
      width: 40px;
      height: 25px;
      border: 0;
      border-radius: 3px 0 0 0;
      background-color: rgba(255,255,255, 0.8);
      font-size: 12px;
      line-height: 25px;
      outline: none;
      z-index: 111;
      cursor: pointer;
    }
    &:hover {
      .update {
        display: block;
      }
      
    }
    .opacity {
      opacity: 0;
      cursor: pointer;
      z-index: 112;
    }
  }
  .margin-bottom-10 {
    margin-bottom: 10px;
  }
  .el-radio {
    margin-right: 32px;
    // &:last-child() {
    //   margin-right: 0;
    // }
  }
</style>